import React, {Component} from 'react'
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native'

export default class PointsExchangeComponent extends Component {
  pointsExchange(){
    let pointsExchanges = [
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
        nowPrice: '1000',
        previousPrice: '180',
      },
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
        nowPrice: '1000',
        previousPrice: '180',
      },
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
        nowPrice: '1000',
        previousPrice: '180',
      },
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
        nowPrice: '1000',
        previousPrice: '180',
      },
    ]
    let pointsExchange = <View style={styles.pointsExchangeContainer}>
      <View style={MinaStyle.minaTitle}>
        <Text style={MinaStyle.minaTitleLeft}>积分兑换</Text>
      </View>
      <View style={styles.pointsExchangeMain}>
        {pointsExchanges.map((item, index) => {
          return(
            <View style={styles.pointsExchangeItem} key={index}>
              <Image
                style={styles.pointsExchangeImg}
                source={require('../../../assets/imgs/shop.jpg')}
              />
              <Text ellipsizeMode="tail" numberOfLines={1} style={styles.pointsExchangeTitle}>{item.title}</Text>
              <View style={styles.pointsExchangePrice}>
                <Text style={styles.nowPrice}>{item.nowPrice}<Text style={styles.nowPriceText}>积分</Text></Text>
                <Text style={styles.previousPrice}>¥{item.previousPrice}</Text>
              </View>
            </View>
          )
        })}
      </View>
    </View>
    return pointsExchange;
  }
  render() {
    return (
      this.pointsExchange()
    )
  }
}

const styles = StyleSheet.create({
  pointsExchangeContainer: {

  },
  pointsExchangeMain: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
  },
  pointsExchangeItem: {
    width: '48.5%',
    marginBottom: 8,
  },
  pointsExchangeImg: {
    width: '100%',
    height: 168,
    borderRadius: 5,
  },
  pointsExchangeTitle: {
    marginTop: 8,
    fontSize: 14,
    color: '#282828',
  },
  pointsExchangePrice: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  nowPrice: {
    color: '#FF4056',
    fontSize: 16,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: ('normal', '500'),
  },
  nowPriceText: {
    color: '#FF4056',
    fontSize: 11,
    fontFamily: 'PingFangSC-Light',
  },
  previousPrice: {
    color: '#9c9c9c',
    fontSize: 11,
    fontFamily: 'PingFangSC-Light',
    fontWeight: ('normal', '300'),
    textDecorationLine: 'line-through',
  },
})